<template>
    <div>
        <div class="blog-up">
            <p class="blog-up-name">hello world</p>
        </div>
        <div class="show-content">
            <div class="show-left">
                <h3><span>文章目录</span><i class="el-icon-close"></i></h3>
                <ul>
                    <li class="star"><i class="el-icon-star-off"></i>&nbsp;&nbsp;<a href="#hello">你好世界</a></li>
                </ul>

               
            </div>
            <div class="show-right">
                <h1>hello world</h1>
                <div class="times"><i class="el-icon-time">2020年9月24日</i><i class="el-icon-chat-dot-round" style="margin-left: 30px;">0</i></div>
                <div class="processs">
                    <h3><a name="hello">你好，世界</a></h3>
                    <p>Hi, my name is Haodong Xu. Welcome to my blog. Nice to meet you! Hi, my name is Haodong Xu. Welcome to my blog. Nice to meet you! Hi, my name is Haodong Xu. Welcome to my blog. Nice to meet you! Hi, my name is Haodong Xu. Welcome to my blog. Nice to meet you! Hi, my name is Haodong Xu. Welcome to my blog. Nice to meet you! Hi, my name is Haodong Xu. Welcome to my blog. Nice to meet you! Hi, my name is Haodong Xu. Welcome to my blog. Nice to meet you! Hi, my name is Haodong Xu. Welcome to my blog. Nice to meet you! Hi, my name is Haodong Xu. Welcome to my blog. Nice to meet you! </p>
                </div>
                <div class="processs">
                    <pre><code class="lang-html">
<span class="hljs-tag">&lt;p&gt; <span class="hljs-name">hello</span> <span class="hljs-attr">world</span> <span class="hljs-tag">&lt;p&gt;</span></span>

                    </code></pre>
                </div>
                <div class="processs">
                    <pre><code class="lang-html">
<span class="hljs-tag">console.log(<span class="hljs-string">'headline animated bounceIn'</span>)</span>
<span class="hljs-tag">alert<span class="hljs-attribute">(</span><span class="hljs-string">'hello world'</span><span class="hljs-attribute">)</span></span>

                    </code></pre>
                </div>
                <div>
                    <Email></Email>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import Email from '@/components/email'

export default {
    name:'show',
    components:{
        Email,
    }

}
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
        color: #fff;
    }

    .blog-up{
        background:url('../assets/sunset.jpg');
        height:570px;
        width:100%;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .blog-up-name{
        margin: 0;
        color: #fff;
        font-size: 45px;
        font-family: 'Times New Roman';
    }
    .show-content{
        display: flex;
        background-color: black;
        color: #fff;
    }
    .show-left{
        width: 300px;
        text-align: left;
        margin-left: 32px;
        margin: 40px 20px 20px 10px;
    }
    .show-left h3 span{
        margin-right: 20px;
    }
    .show-left ul{
        color: #fff;
        list-style: none;
    }
    .show-left ul li{
        height: 30px;
        width: 190px;
    }
    .show-left h3{
        margin-bottom: 10px;
    }
    .star{
        margin-left:10px;
    }
    .liststar{
        margin-left: 30px;
        margin-top: 5px;
    }
    .show-right{
        width: 800px;
        text-align: left;
    }
    .show-right h1{
        text-align: center;
        margin-top: 70px;
    }
    .times{
        text-align: right;
    }
    .firsts{
        font-size: 25px;
        font-weight: 600;
        border-bottom: 2px solid #fff;
        padding: 20px 0 10px 0;
    }
    .codes{
        margin: 35px 0px 35px 0;
    }
    .codes p{
        margin-top: 10px;
        color: #e3eaf1;
    }
    .processs{

    }
    .processs h3{
        padding: 30px 0 10px 0;
    }
    .finishs{

    }
    .finishs h2{
        border-bottom: 2px solid;
        padding: 50px 0 15px 0;
    }
    .finishs p{
        padding-top: 25px;
    }
    pre{
        padding: 0.625rem 0.625rem;
        background: #474949;
        border-radius: 0.3125rem;
        overflow-x: auto;
        font-size: 18px;
        margin-top: 20px;
    }
    code{
        color: #93f0d8;
    }
    .hljs-comment{
        color: #8e908c;
    }
    .hljs-tag{
        color: darkturquoise;
    }
    .hljs-string{
        color: greenyellow;
    }
    .hljs-attribute {
        color: #eab700;
    }
    .hljs-number{
        color: #f5871f;
    }
    .hljs-keyword{
        color: #cf20ff;
    }
</style>